﻿<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>SmartInfoWindow Demo</title> 
<script src="js/data.js"></script> 
<script src="http://www.google.com/jsapi"></script> 
<script type="text/javascript">google.load("jquery", "1");</script> 
<script type="text/javascript"> 
google.load("maps", "3", {other_params:"sensor=false"});
</script> 
<script src="js/smartinfowindow.js"></script> 
<script>
var map, cloud;
var counter = 0;
var markers = [];

function init() {
  var options = {
    zoom: 2,
    center: new google.maps.LatLng(0, 0),
    mapTypeId: google.maps.MapTypeId.SATELLITE
  }
  map = new google.maps.Map(document.getElementById('map_canvas'), options);
  for (var i = 0; i < 15; i++) {
    makeMarker(locations[i]);
  }
  centerMap();
}

function centerMap() {
  map.setCenter(markers[markers.length-1].getPosition());
}


function makeMarker(location) {
  var markerOptions = {map: map, position: new google.maps.LatLng(location.lat, location.lng)};
  var marker = new google.maps.Marker(markerOptions);
  markers.push(marker);
  var content = '<div style="text-align: center; font-size:14px;"><center><b>Diamantino, Brazil</b></center><img width="240" height="180" src="http://mw2.google.com/mw-panoramio/photos/small/7253919.jpg"/><div style="margin: auto; text-align: right; width: 240px;" class="linkbutton"><a href="http://www.panoramio.com/user/279908">Edson Walter Cavalari</a></div><div class="linkbutton"><a href="http://www.panoramio.com/photo/7253919" target="_blank">See more photos at Panoramio.com</a></div><br/><div class="linkbutton"><a href="http://www.google.com/search?q=site:wikipedia.org+Diamantino,Brazil&amp;btnI=I\'m+Feeling+Lucky" target="_blank">Read more about this location</a></div><div class="linkbutton"><a href="javascript:void(0)" id="zoomLink">Zoom in to this location</a></div></div>';

  google.maps.event.addListener(marker, 'click', function(e) {
    var infobox = new SmartInfoWindow({position: marker.getPosition(), map: map, content: content});
  });
}
</script>
</head>
<body onload="init()">
  <div id="map_canvas" style="width:500px; height:600px;"></div>
</body>
</html>
